import {BrowserRouter, Route, Routes} from "react-router-dom";
import Main from "../../pages/main";
import Dashboard from "../../pages/dashboard";
import Topic from "../../pages/topic";
import Message from "../../pages/message";
import Consumer from "../../pages/consumer";
import RouteFail from "../../pages/routeFail";

/**
 * 主要内容
 */
const AppContent = () => {

    return (
        <div style={{
            height: '100%',
            paddingTop: '3vh',
            paddingLeft: '3vw',
            paddingRight: '3vw',
            overflow: 'hidden'
        }}>
            <div style={{
                height: '100%',
                backgroundColor: 'white',
                borderRadius: '20px',
                padding: '20px 30px',
                overflow: 'auto',
                boxSizing: 'border-box' // 避免内部 padding 导致高度溢出
            }}>
                {/* 页面主要内容根据url渲染组件 */}
                <BrowserRouter>
                    <Routes>
                        <Route path="/" element={<Main/>}/>
                        <Route path="/dashboard" element={<Dashboard/>}/>
                        <Route path="/topic" element={<Topic/>}/>
                        <Route path="/message" element={<Message/>}/>
                        <Route path="/consumer" element={<Consumer/>}/>
                        <Route path="/*" element={<RouteFail/>}/>
                    </Routes>
                </BrowserRouter>
            </div>
        </div>
    )

}

export default AppContent;